<!--


Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

-->

<div id="dsWizardContainer">
    <div>
        <ol class="breadcrumb">
            <li><a ng-click="navigateToDashboard()">Dashboard</a></li>
            <li class="active">New Delivery Service</li>
        </ol>
    </div>
    <div class="row">
        <div class="col-lg-3 col-md-12 col-sm-12">
            <ul class="nav nav-pills nav-stacked">
                <li class="header">New Delivery Service</li>
                <li>
                    <a ng-class="{'selected-step': openTab == 'service-desc-tab'}" ng-click="jumpToTab('service-desc-tab', 'serviceDescStarted')">
                        <i class="fa fa-check fa-fw" ng-show="serviceDescStarted && !serviceDescForm.$invalid"></i> Service Description
                    </a>
                </li>
                <li>
                    <a ng-class="{'selected-step': openTab == 'traffic-tab'}" ng-click="jumpToTab('traffic-tab', 'trafficStarted')">
                        <i class="fa fa-check fa-fw" ng-show="trafficStarted && !trafficForm.$invalid"></i> Traffic &amp; Library Estimates
                    </a>
                </li>
                <li>
                    <a ng-class="{'selected-step': openTab == 'origin-tab'}" ng-click="jumpToTab('origin-tab', 'originStarted')">
                        <i class="fa fa-check fa-fw" ng-show="originStarted && !originForm.$invalid"></i> Origin Server &amp; Security
                    </a>
                </li>
                <li>
                    <a ng-class="{'selected-step': openTab == 'core-tab'}" ng-click="jumpToTab('core-tab', 'coreStarted')">
                        <i class="fa fa-check fa-fw" ng-show="coreStarted && !coreForm.$invalid"></i> Core Features
                    </a>
                </li>
                <li>
                    <a ng-class="{'selected-step': openTab == 'service-limits-tab'}" ng-click="jumpToTab('service-limits-tab', 'serviceLimitStarted')">
                        <i class="fa fa-check fa-fw" ng-show="serviceLimitStarted && !serviceLimitForm.$invalid"></i> Service Limits
                    </a>
                </li>
                <li>
                    <a ng-class="{'selected-step': openTab == 'header-tab'}" ng-click="jumpToTab('header-tab', 'headerStarted')">
                        <i class="fa fa-check fa-fw" ng-show="headerStarted && !headerForm.$invalid"></i> Header Customization
                    </a>
                </li>
                <li>
                    <a ng-class="{'selected-step': openTab == 'notes-tab'}" ng-click="jumpToTab('notes-tab', 'notesStarted')">
                        <i class="fa fa-check fa-fw" ng-show="notesStarted && !notesForm.$invalid"></i> Additional Notes
                    </a>
                </li>
                <li>
                    <a ng-class="{'selected-step': openTab == 'confirm-tab'}" ng-click="jumpToTab('confirm-tab', 'confirmStarted')">
                        Confirm &amp; Submit
                    </a>
                </li>
            </ul>
        </div>
        <div id="dsNewFormContainer" class="col-lg-9 col-med-12 col-sm-12">
            <form name="serviceDescForm" role="form" ng-show="openTab == 'service-desc-tab'" novalidate>
                <legend>Service Description</legend>
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label" for="customer">Customer&nbsp;&nbsp;<i class="customer-tooltip field-info fa fa-info-circle" popover-title="Customer" uib-popover="Name of the customer to display on the service. We use this to help determine the service ids and relation to other services." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="right" popover-append-to-body="true"></i></label>
                            <input id="customer" name="customer" type="text" class="form-control" ng-model="dsData.customer" ng-maxlength="50" required>
                            <small class="input-error" ng-show="hasPropertyError(serviceDescForm.customer, 'required')">[ Required ]</small>
                            <small class="input-error" ng-show="hasPropertyError(serviceDescForm.customer, 'maxlength')">[ Too Long ]</small>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label" for="deliveryProtocol">Delivery Protocol&nbsp;&nbsp;<i class="delivery-protocol-tooltip field-info fa fa-info-circle" popover-title="Delivery Protocol" uib-popover="Services that use &quot;HTTP and HTTPS&quot; will be able to deliver both types of traffic. If you deliver HTTPS you will not be able to use a service alias with your service." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="top" popover-append-to-body="true"></i></label>
                            <select id="deliveryProtocol" name="deliveryProtocol" class="form-control" ng-change="onDeliveryProtocolChange()" ng-model="dsData.deliveryProtocol">
                                <option value="http">HTTP</option>
                                <option value="https-only">HTTPS</option>
                                <option value="http-and-https">HTTP and HTTPS</option>
                                <option value="http-to-https">HTTP to HTTPS</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label" for="contentType">Content Type&nbsp;&nbsp;<i class="content-type-tooltip field-info fa fa-info-circle" popover-title="Content Type" uib-popover="This choice should reflect the primary content of the service. Services may deliver more than one type of content." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="right" popover-append-to-body="true"></i></label>
                            <select id="contentType" name="contentType" class="form-control" ng-model="dsData.contentType">
                                <option value="video-on-demand">Video - On Demand</option>
                                <option value="video-live">Video - Live</option>
                                <option value="web-content-file-download">Web Content / File Download</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label" for="routingType">Routing Type&nbsp;&nbsp;<i class="routing-type-tooltip field-info fa fa-info-circle" popover-title="Routing Type" uib-popover="DNS is the standard routing type for most CDN services. HTTP Redirect is a specialty routing service that is primarily used for video and large file downloads where localization and latency are significant concerns." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="top" popover-append-to-body="true"></i></label>
                            <select id="routingType" name="routingType" class="form-control" ng-disabled="dsData.deliveryProtocol == 'http-to-https'" ng-change="onRoutingTypeChange()" ng-model="dsData.routingType">
                                <option value="dns">DNS</option>
                                <option value="http">HTTP Redirect</option>
                            </select>
                            <small class="input-error" ng-show="dsData.deliveryProtocol == 'http-to-https'">HTTP required for HTTP to HTTPS delivery protocol</small>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <div class="form-group">
                            <label class="control-label" for="serviceDesc">Service Description&nbsp;&nbsp;<i class="service-desc-tooltip field-info fa fa-info-circle" popover-title="Service Description" uib-popover="This description will be used to help name your service and differentiate it from your other services." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="right" popover-append-to-body="true"></i></label>
                            <textarea id="serviceDesc" name="serviceDesc" rows="3" class="form-control" ng-model="dsData.serviceDesc" ng-maxlength="400" required></textarea>
                            <small class="input-error" ng-show="hasPropertyError(serviceDescForm.serviceDesc, 'required')">[ Required ]</small>
                            <small class="input-error" ng-show="hasPropertyError(serviceDescForm.serviceDesc, 'maxlength')">[ Too Long ]</small>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="pull-right">
                    <button type="button" class="btn action-btn" ng-disabled="serviceDescForm.$invalid" ng-click="jumpToTab('traffic-tab', 'trafficStarted')">Next</button>
                </div>
            </form>
            <form name="trafficForm" role="form" ng-show="openTab == 'traffic-tab'" novalidate>
                <legend>Traffic &amp; Library Estimates</legend>
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label" for="peakBpsEstimate">Peak Bandwidth Estimate&nbsp;&nbsp;<i class="peakBpsEstimate-tooltip field-info fa fa-info-circle" popover-title="Peak Bandwidth Estimate" uib-popover="Service size estimates help us manage cache efficiency and plan for capacity for new build services. Sizing should be estimated for short term expectations. We actively monitor service growth over time and adjust configuration settings as needed." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="right" popover-append-to-body="true"></i></label>
                            <select id="peakBpsEstimate" name="peakBpsEstimate" class="form-control" ng-model="dsData.peakBPSEstimate">
                                <option value="less-than-5-Gbps">Less than 5 Gbps</option>
                                <option value="5-to-50-Gbps">5 to 50 Gbps</option>
                                <option value="gt-50-Gbps">Greater than 50 Gbps</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label" for="maxLibrarySizeEstimate">Max Library Size Estimate&nbsp;&nbsp;<i class="maxLibrarySizeEstimate-tooltip field-info fa fa-info-circle" popover-title="Max Library Size Estimate" uib-popover="Service size estimates help us manage cache efficiency and plan for capacity for new build services. Sizing should be estimated for short term expectations. We actively monitor service growth over time and adjust configuration settings as needed." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="top" popover-append-to-body="true"></i></label>
                            <select id="maxLibrarySizeEstimate" name="maxLibrarySizeEstimate" class="form-control" ng-model="dsData.maxLibrarySizeEstimate">
                                <option value="less-than-200-GB">Less than 200 GB</option>
                                <option value="200-GB-to-2-TB">200 GB to 2 TB</option>
                                <option value="greater-than-2-TB">Greater than 2 TB</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label" for="peakTpsEstimate">Peak Transactions/Second Estimate&nbsp;&nbsp;<i class="peakTpsEstimate-tooltip field-info fa fa-info-circle" popover-title="Peak Transactions/Second Estimate" uib-popover="Service size estimates help us manage cache efficiency and plan for capacity for new build services. Sizing should be estimated for short term expectations. We actively monitor service growth over time and adjust configuration settings as needed." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="right" popover-append-to-body="true"></i></label>
                            <select id="peakTpsEstimate" name="peakTpsEstimate" class="form-control" ng-model="dsData.peakTPSEstimate">
                                <option value="less-than-1000-TPS">Less than 1,000 TPS</option>
                                <option value="1000-to-5000-TPS">1,000 to 5,000 TPS</option>
                                <option value="greater-than-5000-TPS">Greater than 5,000 TPS</option>
                            </select>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="pull-right">
                    <button type="button" class="btn btn-link" ng-click="jumpToTab('service-desc-tab', 'serviceDescStarted')">Back</button>
                    <button type="button" class="btn action-btn" ng-disabled="trafficForm.$invalid" ng-click="jumpToTab('origin-tab', 'originStarted')">Next</button>
                </div>
            </form>
            <form name="originForm" role="form" ng-show="openTab == 'origin-tab'" novalidate>
                <fieldset>
                    <div class="col-sm-6 col-md-6">
                        <legend>Origin Server</legend>
                        <div class="form-group">
                            <label class="control-label" for="originUrl">Origin Server URL&nbsp;&nbsp;<i class="originUrl-tooltip field-info fa fa-info-circle" popover-title="Origin Server URL" uib-popover="The URL path to the origin server including http://" popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="right" popover-append-to-body="true"></i></label>
                            <input id="originUrl" name="originUrl" type="text" placeholder="http://" class="form-control" ng-model="dsData.originURL" ng-maxlength="2000" ng-pattern="/^(https?:\/\/)/" required>
                            <small class="input-error" ng-show="hasPropertyError(originForm.originUrl, 'required')">[ Required ]</small>
                            <small class="input-error" ng-show="hasPropertyError(originForm.originUrl, 'pattern')">[ Must start with http:// or https:// ]</small>
                            <small class="input-error" ng-show="hasPropertyError(originForm.originUrl, 'maxlength')">[ Too Long ]</small>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="originDynamicRemap">Origin Dynamic Remap&nbsp;&nbsp;<i class="originDynamicRemap-tooltip field-info fa fa-info-circle" popover-title="Origin Dynamic Remap" uib-popover="This is a feature which allows services to use multiple origin URLs for the same service. This is done by passing an origin URL value as a part of each request (ex query string). Most customers will not require this feature. If you select &quot;Yes&quot; for this feature, we will contact you to discuss the details." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="right" popover-append-to-body="true"></i></label>
                            <select id="originDynamicRemap" name="originDynamicRemap" class="form-control" ng-model="dsData.hasOriginDynamicRemap" ng-options="boolean.value as boolean.label for boolean in booleans"></select>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="originTestFile">Origin Test File&nbsp;&nbsp;<i class="originTestFile-tooltip field-info fa fa-info-circle" popover-title="Origin Test File" uib-popover="A URL path to a test file available on the origin server. This is used to verify that service is setup correctly. crossdomain.xml and clientaccesspolicy.xml are two examples of common files available on the origin." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="right" popover-append-to-body="true"></i></label>
                            <input id="originTestFile" name="originTestFile" type="text" placeholder="http://" class="form-control" ng-model="dsData.originTestFile" ng-maxlength="2000" ng-pattern="/^(https?:\/\/)/" required>
                            <small class="input-error" ng-show="hasPropertyError(originForm.originTestFile, 'required')">[ Required ]</small>
                            <small class="input-error" ng-show="hasPropertyError(originForm.originTestFile, 'pattern')">[ Must start with http:// or https:// ]</small>
                            <small class="input-error" ng-show="hasPropertyError(originForm.originTestFile, 'maxlength')">[ Too Long ]</small>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <legend>Origin Security</legend>
                        <div class="form-group">
                            <label class="control-label" for="originAclWhitelist">ACL/Whitelist to Access Origin&nbsp;&nbsp;<i class="originAclWhitelist-tooltip field-info fa fa-info-circle" popover-title="ACL/Whitelist to Access Origin" uib-popover="Do you restrict access to your origin using an access control list (ACL or whitelist) of IPs?" popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="left" popover-append-to-body="true"></i></label>
                            <select id="originAclWhitelist" name="originAclWhitelist" class="form-control" ng-model="dsData.hasOriginACLWhitelist" ng-options="boolean.value as boolean.label for boolean in booleans"></select>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="originHeaders">Header to Access Origin (optional)&nbsp;&nbsp;<i class="originHeaders-tooltip field-info fa fa-info-circle" popover-title="Header to Access Origin" uib-popover="Do you require a header to be passed in requests to your origin? If you do, please provide the value of this header." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="top" popover-append-to-body="true"></i></label>
                            <input id="originHeaders" name="originHeaders" type="text" class="form-control" ng-model="dsData.originHeaders" ng-maxlength="500">
                            <small class="input-error" ng-show="hasPropertyError(originForm.originHeaders, 'maxlength')">[ Too Long ]</small>
                        </div>
                        <div class="form-group">
                            <label class="control-label" for="otherOriginSecurity">Other Origin Security Measures (optional)&nbsp;&nbsp;<i class="otherOriginSecurity-tooltip field-info fa fa-info-circle" popover-title="Other Origin Security Measures" uib-popover="Do you have other origin security measures that need to be considered for access? Please describe." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="top" popover-append-to-body="true"></i></label>
                            <input id="otherOriginSecurity" name="otherOriginSecurity" type="text" class="form-control" ng-model="dsData.otherOriginSecurity" ng-maxlength="500">
                            <small class="input-error" ng-show="hasPropertyError(originForm.otherOriginSecurity, 'maxlength')">[ Too Long ]</small>
                        </div>
                    </div>
                </fieldset>
                <hr>
                <div class="pull-right">
                    <button type="button" class="btn btn-link" ng-click="jumpToTab('traffic-tab', 'trafficStarted')">Back</button>
                    <button type="button" class="btn action-btn" ng-disabled="originForm.$invalid" ng-click="jumpToTab('core-tab', 'coreStarted')">Next</button>
                </div>
            </form>
            <form name="coreForm" role="form" ng-show="openTab == 'core-tab'" novalidate>
                <legend>Core Features</legend>
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label" for="queryStringHandling">Query String Handling&nbsp;&nbsp;<i class="queryStringHandling-tooltip field-info fa fa-info-circle" popover-title="Query String Handling" uib-popover-template="templates.queryStringHandling" popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-big" popover-placement="right" popover-append-to-body="true"></i></label>
                            <select id="queryStringHandling" name="queryStringHandling" class="form-control" ng-model="dsData.queryStringHandling">
                                <option value="use-in-cache-key-and-pass-up">Use in Cache Key, and Pass Up</option>
                                <option value="ignore-in-cache-key-and-pass-up">Ignore in Cache Key, and Pass Up</option>
                                <option value="drop-at-edge">Drop at Edge</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label" for="signedURLs">Signed URLs / URL Tokenization&nbsp;&nbsp;<i class="signedURLs-tooltip field-info fa fa-info-circle" popover-title="Signed URLs / URL Tokenization" uib-popover-template="templates.signedUrls" popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-popup-close-delay="1000" popover-placement="top" popover-append-to-body="true"></i></label>
                            <select id="signedURLs" name="signedURLs" class="form-control" ng-model="dsData.hasSignedURLs" ng-options="boolean.value as boolean.label for boolean in booleans"></select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label" for="rangeRequestHandling">Range Request Handling&nbsp;&nbsp;<i class="rangeRequestHandling-tooltip field-info fa fa-info-circle" popover-title="Range Request Handling" uib-popover-template="templates.rangeRequestHandling" popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-big" popover-placement="right" popover-append-to-body="true"></i></label>
                            <select id="rangeRequestHandling" name="rangeRequestHandling" class="form-control" ng-model="dsData.rangeRequestHandling">
                                <option value="range-requests-not-used">Range Requests Not Used</option>
                                <option value="consistent-non-overlapping-range-requests-used">Consistent, Non-Overlapping Range Requests Used</option>
                                <option value="variable-overlapping-range-requests-used">Variable, Overlapping Range Requests Used</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label" for="negativeCachingCustomization">Negative Caching Customization&nbsp;&nbsp;<i class="negativeCachingCustomization-tooltip field-info fa fa-info-circle" popover-title="Negative Caching Customization" uib-popover="For failed CDN responses like 404 or 502, the CDN will cache the response and reserve it for 1 second to prevent the customer origin from being overloaded with retries. This behavior can be customized but most customers keep the standard parameters." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="top" popover-append-to-body="true"></i></label>
                            <select id="negativeCachingCustomization" name="negativeCachingCustomization" class="form-control" ng-change="onNegativeCachingCustomizationChange()" ng-model="dsData.hasNegativeCachingCustomization" ng-options="boolean.value as boolean.label for boolean in booleans"></select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        <div class="row" ng-repeat="alias in dsData.serviceAliases track by $index">
                            <div class="col-sm-12 col-md-12">
                                <ng-form name="aliasForm">
                                    <div class="form-group">
                                        <div class="input-group alias-inputs">
                                            <label class="control-label" for="serviceAlias">Service Alias #{{$index + 1}} (optional)&nbsp;&nbsp;<i class="serviceAlias-tooltip field-info fa fa-info-circle" popover-title="Service Alias" uib-popover="Do you have other service aliases which will be used for this service? We need to know these aliases so that we know where to direct these requests. You can add multiple aliases." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="right" popover-append-to-body="true"></i></label>
                                            <input id="serviceAlias" name="serviceAlias" type="text" placeholder="http://" class="form-control" ng-model="dsData.serviceAliases[$index]" ng-pattern="/^(https?:\/\/)/" ng-maxlength="2000">
                                            <span class="form-input-group-btn input-group-btn">
                                                <button id="removeBtn" name="removeBtn" class="btn btn-default" ng-show="$index > 0" ng-click="removeAlias($index)"><i class="fa fa-minus"></i></button>
                                                <button id="addBtn" name="addBtn" class="btn btn-default" ng-show="$index == (dsData.serviceAliases.length - 1)" ng-click="addAlias()"><i class="fa fa-plus"></i></button>
                                            </span>
                                        </div>
                                        <small class="input-error" ng-show="hasPropertyError(aliasForm.serviceAlias, 'pattern')">[ Must start with http:// or https:// ]</small>
                                        <small class="input-error" ng-show="hasPropertyError(aliasForm.serviceAlias, 'maxlength')">[ Too Long ]</small>
                                    </div>
                                </ng-form>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group" ng-show="dsData.hasNegativeCachingCustomization == true">
                            <label class="control-label" for="negativeCachingCustomizationNote">Negative Caching Instructions&nbsp;&nbsp;<i class="negativeCachingCustomizationNote-tooltip field-info fa fa-info-circle" popover-title="Negative Caching Instructions" uib-popover="Please enter any specific instructions you have regarding negative caching customization." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="top" popover-append-to-body="true"></i></label>
                            <textarea id="negativeCachingCustomizationNote" name="negativeCachingCustomizationNote" rows="3" class="form-control" ng-model="dsData.negativeCachingCustomizationNote" ng-required="dsData.hasNegativeCachingCustomization == true" ng-maxlength="400"></textarea>
                            <small class="input-error" ng-show="hasPropertyError(coreForm.negativeCachingCustomizationNote, 'required')">[ Required ]</small>
                            <small class="input-error" ng-show="hasPropertyError(coreForm.negativeCachingCustomizationNote, 'maxlength')">[ Too Long ]</small>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="pull-right">
                    <button type="button" class="btn btn-link" ng-click="jumpToTab('origin-tab', 'originStarted')">Back</button>
                    <button type="button" class="btn action-btn" ng-disabled="coreForm.$invalid" ng-click="jumpToTab('service-limits-tab', 'serviceLimitStarted')">Next</button>
                </div>
            </form>
            <form name="serviceLimitsForm" role="form" ng-show="openTab == 'service-limits-tab'" novalidate>
                <legend>Service Limits</legend>
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label" for="rateLimitingGbps">Rate Limiting - Bandwidth (Gbps) (optional)&nbsp;&nbsp;<i class="rateLimitingGbps-tooltip field-info fa fa-info-circle" popover-title="Rate Limiting - Bandwidth (Gbps)" uib-popover="If a service limit is selected, then you must provide an overflow point where the CDN will send the excess traffic. This overflow point is typically a another CDN service or a customer origin. The overflow can be provided as an FQDN (http://customername.com) or as an IPv4 or IPv6 address (10.10.10.10). When the service exceeds the threshold set, the CDN will redirect all excess traffic to the overflow point." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="right" popover-append-to-body="true"></i></label>
                            <input id="rateLimitingGbps" name="rateLimitingGbps" type="number" class="form-control" min="0" ng-change="onRateLimitingChange()" ng-model="dsData.rateLimitingGBPS">
                            <small class="input-error" ng-show="hasPropertyError(serviceLimitsForm.rateLimitingGbps, 'min')">[ Invalid ]</small>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label" for="rateLimitingTPS">Rate Limiting - Transactions/Second (optional)&nbsp;&nbsp;<i class="rateLimitingTPS-tooltip field-info fa fa-info-circle" popover-title="Rate Limiting - Transactions/Second" uib-popover="If a service limit is selected, then you must provide an overflow point where the CDN will send the excess traffic. This overflow point is typically a another CDN service or a customer origin. The overflow can be provided as an FQDN (http://customername.com) or as an IPv4 or IPv6 address (10.10.10.10). When the service exceeds the threshold set, the CDN will redirect all excess traffic to the overflow point." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="bottom" popover-append-to-body="true"></i></label>
                            <input id="rateLimitingTPS" name="rateLimitingTPS" type="number" class="form-control" min="0" ng-change="onRateLimitingChange()" ng-model="dsData.rateLimitingTPS">
                            <small class="input-error" ng-show="hasPropertyError(serviceLimitsForm.rateLimitingTPS, 'min')">[ Invalid ]</small>
                        </div>
                    </div>
                </div>
                <div class="row" ng-show="dsData.rateLimitingGBPS > 0 || dsData.rateLimitingTPS > 0">
                    <div class="col-sm-6 col-md-6">
                        <div class="form-group">
                            <label class="control-label" for="overflowService">Overflow Service (IP or URL)&nbsp;&nbsp;<i class="overflowService-tooltip field-info fa fa-info-circle" popover-title="Overflow Service (IP or URL)" uib-popover="This overflow point is typically a another CDN service or a customer origin. The overflow can be provided as an FQDN (http://customername.com) or as an IPv4 or IPv6 address (10.10.10.10). When the service exceeds the threshold set, the CDN will redirect all excess traffic to the overflow point." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="right" popover-append-to-body="true"></i></label>
                            <input id="overflowService" name="overflowService" type="text" class="form-control" ng-required="dsData.rateLimitingGBPS > 0 || dsData.rateLimitingTPS > 0" ng-model="dsData.overflowService">
                        </div>
                    </div>
                </div>
                <hr>
                <div class="pull-right">
                    <button type="button" class="btn btn-link" ng-click="jumpToTab('core-tab', 'coreStarted')">Back</button>
                    <button type="button" class="btn action-btn" ng-disabled="serviceLimitsForm.$invalid" ng-click="jumpToTab('header-tab', 'headerStarted')">Next</button>
                </div>
            </form>
            <form name="headerForm" role="form" ng-show="openTab == 'header-tab'" novalidate>
                <legend>Header Customization</legend>
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <div class="form-group">
                            <label class="control-label" for="headerRewriteEdge">Header Rewrite - Edge Tier (optional)&nbsp;&nbsp;<i class="headerRewriteEdge-tooltip field-info fa fa-info-circle" popover-title="Header Rewrite - Edge Tier" uib-popover-template="templates.headerRewriteEdge" popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-big" popover-placement="right" popover-append-to-body="true"></i></label>
                            <textarea id="headerRewriteEdge" name="headerRewriteEdge" rows="3" class="form-control" ng-model="dsData.headerRewriteEdge" ng-maxlength="400"></textarea>
                            <small class="input-error" ng-show="hasPropertyError(headerForm.headerRewriteEdge, 'maxlength')">[ Too Long ]</small>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <div class="form-group">
                            <label class="control-label" for="headerRewriteMid">Header Rewrite - Mid Tier (optional)&nbsp;&nbsp;<i class="headerRewriteMid-tooltip field-info fa fa-info-circle" popover-title="Header Rewrite - Mid Tier" uib-popover-template="templates.headerRewriteMid" popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-big" popover-placement="right" popover-append-to-body="true"></i></label>
                            <textarea id="headerRewriteMid" name="headerRewriteMid" rows="3" class="form-control" ng-model="dsData.headerRewriteMid" ng-maxlength="400"></textarea>
                            <small class="input-error" ng-show="hasPropertyError(headerForm.headerRewriteMid, 'maxlength')">[ Too Long ]</small>
                        </div>
                    </div>
                </div>
                <div class="row" ng-show="dsData.routingType == 'http'">
                    <div class="col-sm-12 col-md-12">
                        <div class="form-group">
                            <label class="control-label" for="headerRewriteRedirectRouter">Header Rewrite - Redirect Router (optional)&nbsp;&nbsp;<i class="headerRewriteRedirectRouter-tooltip field-info fa fa-info-circle" popover-title="Header Rewrite - Redirect Router" uib-popover-template="templates.headerRewriteRedirectRouter" popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-big" popover-placement="right" popover-append-to-body="true"></i></label>
                            <textarea id="headerRewriteRedirectRouter" name="headerRewriteRedirectRouter" rows="3" class="form-control" ng-model="dsData.headerRewriteRedirectRouter" ng-maxlength="400"></textarea>
                            <small class="input-error" ng-show="hasPropertyError(headerForm.headerRewriteRedirectRouter, 'maxlength')">[ Too Long ]</small>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="pull-right">
                    <button type="button" class="btn btn-link" ng-click="jumpToTab('service-limits-tab', 'serviceLimitStarted')">Back</button>
                    <button type="button" class="btn action-btn" ng-disabled="headerForm.$invalid" ng-click="jumpToTab('notes-tab', 'notesStarted')">Next</button>
                </div>
            </form>
            <form name="notesForm" role="form" ng-show="openTab == 'notes-tab'" novalidate>
                <legend>Additional Notes</legend>
                <div class="row">
                    <div class="col-sm-12 col-md-12">
                        <div class="form-group">
                            <label class="control-label" for="notes">Additional Notes&nbsp;&nbsp;<i class="notes-tooltip field-info fa fa-info-circle" popover-title="Additional Notes" uib-popover="Any additional instructions you would like to provide the delivery service provisioning team." popover-trigger="mouseenter" popover-class="popover-class ds-wizard-popover-small" popover-placement="right" popover-append-to-body="true"></i></label>
                            <textarea id="notes" name="notes" rows="5" class="form-control" ng-model="dsData.notes" ng-maxlength="500"></textarea>
                            <small class="input-error" ng-show="hasPropertyError(notesForm.notes, 'maxlength')">[ Too Long ]</small>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="pull-right">
                    <button type="button" class="btn btn-link" ng-click="jumpToTab('header-tab', 'headerStarted')">Back</button>
                    <button type="button" class="btn action-btn" ng-disabled="notesForm.$invalid" ng-click="jumpToTab('confirm-tab', 'confirmStarted')">Next</button>
                </div>
            </form>
            <div ng-show="openTab == 'confirm-tab'">
                <h3>Confirm &amp; Submit</h3>
                <table class="table confirm-table">
                    <tbody>
                        <tr><th colspan="2"><h4 class="heading">Service Description</h4></th></tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Customer:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.customer}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Content Type:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.contentType}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Delivery Protocol:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.deliveryProtocol}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Routing Type:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.routingType}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Service Description:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.serviceDesc}}</td>
                        </tr>
                        <tr><th colspan="2"><h4 class="heading">Traffic &amp; Library Estimates</h4></th></tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Peak Bandwidth Estimate:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.peakBPSEstimate}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Peak Transactions Per Second Estimate:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.peakTPSEstimate}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Max Library Size Estimate:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.maxLibrarySizeEstimate}}</td>
                        </tr>
                        <tr><th colspan="2"><h4 class="heading">Origin Server &amp; Security</h4></th></tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Origin Server URL:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.originURL}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Origin Dynamic Remap:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.hasOriginDynamicRemap}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Origin Test File:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.originTestFile}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">ACL/Whitelist to Access Origin:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.hasOriginACLWhitelist}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Header to Access Origin:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.otherOriginSecurity}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Other Origin Security Measures:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.originHeaders}}</td>
                        </tr>
                        <tr><th colspan="2"><h4 class="heading">Core Features</h4></th></tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Query String Handling:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.queryStringHandling}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Range Request Handling:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.rangeRequestHandling}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Signed URLs / URL Tokenization:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.hasSignedURLs}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Negative Caching Customization:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.hasNegativeCachingCustomization}}</td>
                        </tr>
                        <tr ng-show="dsData.hasNegativeCachingCustomization == true">
                            <td class="col-sm-4 col-md-4 col-lg-4">Negative Caching Instructions:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.negativeCachingCustomizationNote}}</td>
                        </tr>
                        <tr ng-repeat="alias in dsData.serviceAliases track by $index">
                            <td class="col-sm-4 col-md-4 col-lg-4">Service Alias #{{$index + 1}}:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.serviceAliases[$index]}}</td>
                        </tr>
                        <tr><th colspan="2"><h4 class="heading">Service Limits</h4></th></tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Rate Limiting - Bandwidth (Gbps):</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.rateLimitingGBPS}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Rate Limiting - Transactions/Second:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.rateLimitingTPS}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Overflow Service (IP or URL):</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.overflowService}}</td>
                        </tr>
                        <tr><th colspan="2"><h4 class="heading">Header Customization</h4></th></tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Header Rewrite - Edge Tier:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.headerRewriteEdge}}</td>
                        </tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Header Rewrite - Mid Tier:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.headerRewriteMid}}</td>
                        </tr>
                        <tr ng-show="dsData.routingType.indexOf('http') != -1">
                            <td class="col-sm-4 col-md-4 col-lg-4">Header Rewrite - Redirect Router:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.headerRewriteRedirectRouter}}</td>
                        </tr>
                        <tr><th colspan="2"><h4 class="heading">Additional Notes</h4></th></tr>
                        <tr>
                            <td class="col-sm-4 col-md-4 col-lg-4">Additional Notes:</td>
                            <td class="col-sm-8 col-md-8 col-lg-8">{{dsData.notes}}</td>
                        </tr>
                    </tbody>
                </table>
                <hr>
                <div class="pull-right">
                    <button type="button" class="btn btn-link" ng-click="jumpToTab('notes-tab', 'notesStarted')">Back</button>
                    <button type="button" class="btn action-btn" ng-disabled="incomplete([serviceDescForm, trafficForm, originForm, coreForm, serviceLimitsForm, headerForm, notesForm])" ng-click="submitRequest(dsData)">Submit Request &nbsp;&nbsp;<i class="fa fa-chevron-circle-right fa-lg"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- html for tooltips -->

<script type="text/ng-template" id="signedUrl.html">
    <div>
        <p>If you select "yes" we will provide you with a script to use to sign your URLs as well as a set of 16 keys.</p>
        <p><a href="/resources/assets/other/sign.pl" target="_blank">Perl URL Signing Script</a></p>
        <p><a href="/resources/assets/other/sign_parameters.txt" target="_blank">Signing Script Parameters</a></p>
    </div>
</script>

<script type="text/ng-template" id="queryStringHandling.html">
    <div id="queryStringHandling-tooltip-content">
        <p>When caching your content, we need to know how to handle query strings that come with the request in terms of how we cache each URL. For example if you pass a query string with a user id as a part of each request for the same file, we would need to either ignore this query string or drop it in order to cache the file properly.</p>
        <ul>
            <li>Use in Cache Key, and Pass Up: query string is used in cache key and passed up to the origin when fill requests are made.</li>
            <li>Ignore in Cache Key, and Pass Up: query string is not used in cache key but it is still passed along to the origin when fill requests are made.</li>
            <li>Drop at Edge: query string is not used in cache key and is not passed to origin when fill requests are made.</li>
        </ul>
    </div>
</script>

<script type="text/ng-template" id="rangeRequestHandling.html">
    <div id="rangeRequestHandling-tooltip-content"><p>Range requests are not supported by default. One of two options must
        be selected in order for the CDN to support range requests.</p>
        <ul>
            <li>Consistent, Non-Overlapping Ranges: If this is selected, each range request will be cached as a separate file.</li>
            <li>Variable, Overlapping Ranges: If this is selected, the full object will be pulled into cache as a single file and the varying ranges will be served from the full copy.</li>
        </ul>
        <p>If you know you need range requests but you don’t know which type of requests are made the safer choice is Variable, Overlapping Ranges. This can always be changed later.</p>
        <p>Consistent, Non-Overlapping Example: each client calls the same ranges (in any order) and these ranges do not overlap each other:</p>
        <ul>
            <li>Client 1 calls ranges: 0 to 1,000; 1,001 to 2,000; 2,001 to 2,650</li>
            <li>Client 2 calls ranges: 2,001 to 2,650; 1,001 to 2000; 0 to 1,000</li>
            <li>Client 3 calls ranges: 0 to 1,000; 1,001 to 2000</li>
        </ul>
        <p>Variable, Overlapping Example: each client is free to call whatever range they want, in any order, and these ranges may overlap each other:</p>
        <ul>
            <li>Client 1 calls ranges: 0 to 500; 501 to 1,000</li>
            <li>Client 2 calls ranges: 0 to 1,000; 1,001 to 2,000</li>
            <li>Client 3 calls ranges: 0 to 750; 751 to 1,500</li>
        </ul>
    </div>
</script>

<script type="text/ng-template" id="headerRewriteEdge.html">
    <div id="headerRewriteEdge-tooltip-content">
        <p>Headers can be added or altered at each layer of the CDN. You must tell
            us four things: the action, the header name, the header value, and the direction to apply. The action will tell us
            whether we are adding, removing, or replacing headers. The header name and header value will determine the full
            header text. The direction will determine whether we add it before we respond to a request or before we make a
            request further up the chain in the server hierarchy. Examples include:</p>
        <ul>
            <li>Action: Add</li>
            <li>Header Name: X-CDN</li>
            <li>Header Value: Foo</li>
            <li>Direction: Edge Response to Client</li>
        </ul>
    </div>
</script>

<script type="text/ng-template" id="headerRewriteMid.html">
    <div id="headerRewriteMid-tooltip-content"><p>Headers can be added or altered at each layer of the CDN. You must tell
        us four things: the action, the header name, the header value, and the direction to apply. The action will tell us
        whether we are adding, removing, or replacing headers. The header name and header value will determine the full
        header text. The direction will determine whether we add it before we respond to a request or before we make a
        request further up the chain in the server hierarchy. Examples include:</p>
        <ul>
            <li>Action: Modify (Replace)</li>
            <li>Header Name: Host</li>
            <li>Header Value: code_abc123</li>
            <li>Direction: Mid Request to Origin</li>
        </ul>
    </div>
</script>

<script type="text/ng-template" id="headerRewriteRedirectRouter.html">
    <div id="headerRewriteRedirectRouter-tooltip-content"><p>Headers can be added or altered at each layer of the CDN. You
        must tell us four things: the action, the header name, the header value, and the direction to apply. The action will
        tell us whether we are adding, removing, or replacing headers. The header name and header value will determine the
        full header text. The direction will determine whether we add it before we respond to a request or before we make a
        request further up the chain in the server hierarchy. Examples include:</p>

        <p>The CCR Router is the first server to which the client will connect. The CCR Router will redirect the client to
            the proper edge server based on the geo location of the client and the content requested.</p>
        <ul>
            <li>Action: Add</li>
            <li>Header Name: Access-Control-Allow-Origin</li>
            <li>Header Value: *</li>
            <li>Direction: CCR Response to Client</li>
        </ul>
    </div>
</script>
